<script setup>
import {
  listFiles,
  getFiles,
  delFiles,
  addFiles,
  updateFiles,
} from '@/api/CodeFiles'
import { reactive } from 'vue'

const { proxy } = getCurrentInstance()

const { my_code_type } = proxy.useDict(['my_code_type'])
const formRef = ref(null)
// 列表数据
const tableData = ref([])

const formValue = ref({})

const selectForm = ref([
  { type: '日期范围' },
  { label: '预约人', type: '输入框', model: 'reservationName' },
])

// 按钮枚举
const buttonList = ref([])

// 列表枚举
const column = ref([
  { label: '文章标题', prop: 'articleTitle' },
  { label: '文章内容', prop: 'articleContent' },
  { label: '文章类型', prop: 'articleType' },
  { label: '文章背景说明', prop: 'articleText' },
  { label: '创建时间', prop: 'createTime' },
  { label: '创建人', prop: 'createBy' },
  { label: '操作', prop: 'x', width: '240' },
])

// state
const state = reactive({
  title: '新增',
  total: 0, // 列表总数
  loading: false, //列表加载
  btnLoading: false, // 保存加载
})

// 表单校验
const rules = reactive({
  articleContent: [
    { required: true, message: '文章内容不能为空', trigger: 'blur' },
  ],
  articleType: [
    { required: true, message: '请选择文章类型', trigger: 'change' },
  ],
  articleTitle: [
    { required: true, message: '文章标题不能为空', trigger: 'blur' },
  ],
  articleText: [
    { required: true, message: '请填写文章简介', trigger: 'change' },
  ],
})

// 新增
const add = async () => {
  state.title = '新增'
  state.isShow = true
}

// 修改
const edit = async (id) => {
  try {
    proxy.$modal.loading()
    const { data: result } = await getFiles(id)
    formValue.value = result
    state.title = '修改'
    state.isShow = true
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 批量删除
const removeAll = async () => {
  try {
    await delFiles(state.ids)
    getList()
    proxy.successMsg('删除成功!')
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 删除
const remove = async (id) => {
  try {
    proxy.$modal.loading()
    const is = await proxy.DelMessageBox('是否确认删除该数据？')
    if (!is) return
    await delFiles(id ? id : state.ids)
    getList()
    proxy.successMsg('删除成功!')
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 查看
const look = async (id) => {
  try {
    proxy.$modal.loading()
    const { data: result } = await getFiles(id)
    formValue.value = result
    state.title = '查看'
    state.disabled = true
    state.isShow = true
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 新增提交
const addSub = async () => {
  const validate = await formRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    await addFiles(formValue.value)
    closeFrom()
    getList()
    proxy.successMsg('新增成功!')
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 修改提交
const editSub = async () => {
  const validate = await formRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    await updateFiles(formValue.value)
    getList()
    closeFrom()
    proxy.successMsg('修改成功!')
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 勾选时
const tableSelChange = ({ row, ids }) => {
  state.ids = ids
  state.rows = row

  buttonList.value = [
    { label: '新增', type: 'add' },
    { label: '批量删除', type: 'remove', disabled: !state.ids?.length > 0 },
  ]
}
tableSelChange({ row: [], ids: [] })
// 关闭
const closeFrom = () => {
  formValue.value = {}
  state.isShow = false
  state.disabled = false
}

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 查询提交
const selectSubmit = (obj) => {
  Object.keys(obj).forEach((t) => (query[t] = obj[t]))
  getList()
}

// 查询轮播图列表
const getList = async () => {
  state.loading = true
  try {
    const result = await listFiles(query)
    tableData.value = result.rows
    state.total = result.total
  } catch {
  } finally {
    state.loading = false
  }
}
getList()
</script>

<template>
  <div class="app-container">
    <x-select-form :selectForm="selectForm" @selectSubmit="selectSubmit" />
    <x-button :list="buttonList" @add="add" @edit="edit" @remove="removeAll" />

    <x-table
      keyId="articleId"
      :loading="state.loading"
      :column="column"
      :data="tableData"
      :total="state.total"
      v-model:page="query.pageNum"
      v-model:limit="query.pageSize"
      @pagination="getList"
      @change="tableSelChange"
    >
      <template #columnCell="{ column, record }">
        <x-dictTag
          v-if="column.prop == 'articleType'"
          :options="my_code_type"
          :value="record.articleType"
        />
        <div v-if="column.prop == 'x'" class="operate">
          <el-link icon="Edit" type="primary" @click="edit(record.articleId)"
            >修改</el-link
          >
          <el-link
            icon="DeleteFilled"
            type="danger"
            @click="remove(record.articleId)"
            >删除</el-link
          >
          <el-link icon="Search" type="primary" @click="look(record.articleId)"
            >查看</el-link
          >
        </div>
      </template>
    </x-table>
    <!-- 添加或修改轮播图对话框 -->
    <x-dialog
      width="52rem"
      :loading="state.btnLoading"
      :title="state.title"
      v-model="state.isShow"
      @ok="state.title == '新增' ? addSub() : editSub()"
      @close="closeFrom"
    >
      <el-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="文章标题" prop="articleTitle">
          <el-input
            clearable
            :disabled="state.disabled"
            v-model="formValue.articleTitle"
            placeholder="请输入文章标题"
          />
        </el-form-item>
        <el-form-item label="文章类型" prop="articleType">
          <el-radio-group
            :disabled="state.disabled"
            v-model="formValue.articleType"
          >
            <el-radio v-for="t in my_code_type" :label="t.value">{{
              t.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="文章背景说明" prop="articleText">
          <el-input
            :rows="4"
            maxlength="50"
            show-word-limit
            type="textarea"
            clearable
            :disabled="state.disabled"
            v-model="formValue.articleText"
            placeholder="请输入文章介绍"
          />
        </el-form-item>
        <el-form-item label="文章内容" prop="articleContent">
          <x-editor
            v-if="!state.disabled"
            clearable
            :disabled="state.disabled"
            v-model="formValue.articleContent"
            placeholder="请输入文章内容"
          />
          <div v-else v-html="formValue.articleContent"></div>
        </el-form-item>
      </el-form>
    </x-dialog>
  </div>
</template>
